<template>
    <div class="content_base notice">
      <el-tabs type="border-card" @tab-click="tabClick">
        <el-tab-pane label="用户信息">
          <div class="table">
            <template class="table">
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="userName"
                label="用户名"
                >
              </el-table-column>
              <el-table-column
                prop="passWord"
                label="密码"
                >
              </el-table-column>
            </el-table>
            </template>
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改密码">
          <el-form :model="ruleFormC" status-icon :rules="rulesC" ref="ruleFormC" label-width="120px" class="demo-ruleForm changePwd">
              <el-form-item label="密码:" prop="oldPassword">
               <el-input  type="password" v-model="ruleFormC.oldPassword"  auto-complete="off"></el-input>
             </el-form-item>
             <el-form-item label="新密码:" prop="newPassword">
               <el-input type="password" v-model="ruleFormC.newPassword" auto-complete="off"></el-input>
             </el-form-item>
             <el-form-item label="确认密码:" prop="checkPass">
               <el-input type="password" v-model ="ruleFormC.checkPass" auto-complete="off"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="chengePwd('ruleFormC')">确认修改</el-button>
             </el-form-item>
           </el-form>
        </el-tab-pane>
        <el-tab-pane label="新增用户" v-if="userLevel==3">
          <div class="content">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
               <span>填写规范：</span>
             </div>
             <div class="text item">
               1：相关单位登录名：如江西省河湖局，南昌市水利局，南昌县水利局
             </div>
             <div class="text item">
               2：所属行政单位：如江西省，南昌市，南昌县
             </div>
           </el-card>
            <el-form :model="ruleFormA" status-icon :rules="rulesA" ref="ruleFormA" label-width="180px" class="demo-ruleForm">
              <el-form-item label="相关单位登录名:" prop="userName">
               <el-input v-model.number="ruleFormA.userName"></el-input>
             </el-form-item>
             <el-form-item label="密码:" prop="passWord">
               <el-input type="password" v-model.number="ruleFormA.passWord" auto-complete="off"></el-input>
             </el-form-item>
             <el-form-item label="等级:" prop="level">
               <!-- <el-input  v-model="ruleFormA.level"></el-input> -->
               <el-select v-model.number="ruleFormA.level" clearable placeholder="请选择">
                <el-option
                    v-for="item in level"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               </el-select>
             </el-form-item>
              <el-form-item label="所属行政单位:" prop="unitMessage">
               <el-input v-model="ruleFormA.unitMessage"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="addUser('ruleFormA')">确认新增</el-button>
             </el-form-item>
           </el-form>
           </div>
        </el-tab-pane>
      </el-tabs>
       <el-footer class="footer">Copyright&nbsp;2018江西省水利科学研究院|江西鄱水信息科技有限公司</el-footer>
    </div>
</template>
<script>
export default {
    data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
             callback(new Error('请输入密码'));
           } else {
             if (this.ruleFormC.checkPass !== '') {
               this.$refs.ruleFormC.validateField('checkPass');
             }
             callback();
           }
         };
         var validatePass2 = (rule, value, callback) => {
           if (value === '') {
             callback(new Error('请再次输入密码'));
           } else if (value !== this.ruleFormC.newPassword) {
             callback(new Error('两次输入密码不一致!'));
           } else {
             callback();
           }
         };
        return{
            tableData:[
                {
                    userName:'',passWord:''
                }, 
            ],
            //修改密码
            ruleFormC:{
                  oldPassword:'',
                  newPassword:'',
                  checkPass:'',
            },
            rulesC:{
              oldPassword: [ { required:true, trigger: 'blur',message:'请输入' } ],
              newPassword: [{ validator: validatePass, required:true, trigger: 'blur',message:'请输入' }],
              checkPass: [{ validator: validatePass2, required:true, trigger: 'blur' ,message:'请输入' }],
            },
            //新增用户
            ruleFormA:{
              userName:'',
              passWord:'',
              level:'',
              unitMessage:''
            },
            rulesA:{
                   userName:[{required: true, trigger: 'blur',message:'请填写' }],
                   passWord:[{ required: true, trigger: 'blur',message:'请填写' }],
                   level:[{type:'number', required: true, trigger: 'blur',message:'请填写' }],
                   unitMessage:[{ required: true, trigger: 'blur',message:'请填写' }]
            },
            level:[
              {label:'省级',value:3},
              {label:'市级',value:2},
              {label:'县级',value:1},
            ],
            //用户等级
            userLevel:'',
        }
    },
    methods:{
      //点击刷新数据
       tabClick(value,event){
          if(value.index==0){
            this.tableData[0].passWord = window.localStorage.getItem('passWord');
          }
        },
         //修改密码
        chengePwd(ruleFormC){
          var _this = this
         this.$refs[ruleFormC].validate((valid) => {
          if (valid) {
            ruleFormC = _this[ruleFormC]
           this.$axios.post('/user/updatePassword',ruleFormC).then(function(res){
                var data = res.data.responseMessage
                if(data=='修改成功'){
                   _this.$message({
                      message: '密码重置成功',
                      type: 'success'
                    });
                   //         ruleFormC:{
                   //       oldPassword:'',
                   //       newPassword:'',
                   //       checkPass:'',
                   // } ,
                  window.localStorage.setItem('passWord',_this.ruleFormC.newPassword)
                  _this.ruleFormC.oldPassword=''
                  _this.ruleFormC.newPassword=''
                  _this.ruleFormC.checkPass=''
                }else{
                   _this.$message({
                      message: data,
                      type: data+',密码重置失败'
                    });
                }
           }).catch(function(err){
             console.log(err)
           })
          } else {
            return false;
          }
        })
        } ,
        addUser(ruleFormA){
              var _this  = this 
              this.$refs[ruleFormA].validate((valid) => {
               if (valid) {
                 ruleFormA = _this[ruleFormA]
                this.$axios.post('/user/addUser',ruleFormA).then(function(res){
                     var data = res.data.responseMessage
                     if(data=='增加成功'){
                        _this.$message({
                           message: '增加用户成功',
                           type: 'success'
                         });
                       window.localStorage.setItem('passWord',_this.ruleFormC.newPassword)
                     }else{
                        _this.$message({
                           message: data,
                           type: data+',新增此用户失败'
                         });
                     }
                }).catch(function(err){
                  console.log(err)
                })
               } else {
                 return false;
               }
           })
        }     
      
    },
    created(){
      this.tableData[0].userName = window.localStorage.getItem('unitMessage')
      this.tableData[0].passWord = window.localStorage.getItem('passWord');
      this.userLevel = window.localStorage.getItem('level')

    }

}
</script>
<style>
.el-table th>.cell{
  text-align:center
}
.notice .el-form-item__label{
 text-align: left
}

</style>

<style scoped>
.footer{
    margin-top:50px;
}
.table{
    padding:20px;
    text-align: center;
    margin-top:10px
}
.el-form{
    width:450px;
    float: right;
}
.changePwd{
  width:450px;
  margin:0 auto;
  float: none;
  display: block;
}
.el-input, .el-select{
  width:300px;

}
.el-form-item__label{
    text-align: left!important;
    font-size:18px
}
.el-tabs__item{
   font-size:16px;
}
.box-card{
  margin-top:40px;
  width:480px;
  float: left;
  text-align:left;
  font-size:16px;
  color:#606266

}
.content{
  width:1000px;
  margin:0 auto;
}
</style>


